<template>
  <el-dialog :title="title" :visible.sync="visible" class="dialog-sm" append-to-body @close="visible = false">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" v-loading="loading">
      <el-form-item label="字典类型">
        <el-input v-model="form.type" :readonly="true" />
      </el-form-item>
      <el-form-item label="数据标签" prop="label">
        <el-input v-model="form.label" placeholder="请输入数据标签" maxlength="128"/>
      </el-form-item>
      <el-form-item label="数据键值" prop="value">
        <el-input v-model="form.value" placeholder="请输入数据键值" maxlength="128"/>
      </el-form-item>
      <el-form-item label="回显样式" prop="list_class">
        <el-select v-model="form.list_class" clearable >
          <el-option v-for="item in listClassOptions" :key="item.value" :label="item.label + '(' + item.value + ')'" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="样式属性" prop="css_class">
        <el-input v-model="form.css_class" placeholder="请输入样式属性" maxlength="64"/>
      </el-form-item>
      <el-form-item label="显示排序" prop="list_sort">
        <el-input-number v-model="form.list_sort" controls-position="right" :min="0" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio v-for="dd in dict.type.sys_normal_disable" :key="dd.value" :label="dd.value">{{dd.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否默认" prop="is_default">
        <el-radio-group v-model="form.is_default">
          <el-radio v-for="dd in dict.type.sys_yes_no" :key="dd.value" :label="dd.value">{{dd.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" maxlength="250"/>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button type="primary" @click="handleSubmit" :loading="submitting" :disabled="loading">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addDataApi, infoDataApi, editDataApi } from '@/api/system/dict/data'

export default {
  name: 'DictDataForm',
  dicts: ['sys_normal_disable','sys_yes_no'],
  props: {
    value: Boolean,
    row: Object,
    moduleName: String
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  data(){
    return {
      title: '',
      loading: false,
      submitting: false,
      form: {
        type: '',
        label: '',
        value: '',
        list_sort: 10,
        status: '1',
        is_default: '0',
        css_class: '',
        list_class: '',
        remark: ''
      },
      rules: {
        label: [{ required: true, message: "数据标签不能为空", trigger: "blur" }],
        value: [{ required: true, message: "数据键值不能为空", trigger: "blur" }],
        list_sort: [{ required: true, message: "数据顺序不能为空", trigger: "blur" }]
      },
      // 数据标签回显样式
      listClassOptions: [
        { value: 'default', label: '默认' },
        { value: 'primary', label: '主要' },
        { value: 'success', label: '成功' },
        { value: 'info', label: '信息' },
        { value: 'warning', label: '警告' },
        { value: 'danger', label: '危险' }
      ],
    }
  },
  created() {
    this.init()
  },
  methods:{
    async init() {
      this.loading = true
      this.form.id = this.row?.id || undefined
      if(this.form.id){
        this.title = '编辑'+this.moduleName
        await this.getRowData()
      } else {
        this.title = '添加'+this.moduleName
        this.form.type = this.row?.type || ''
      }
      this.loading = false
    },
    async getRowData() {
      try {
        const { info } = await infoDataApi(this.form.id)
        this.form = this.dataToForm(this.form, info)
      } catch (error) {
        this.visible = false
      }
    },
    async handleSubmit() {
      try {
        const valid = await this.$refs.formRef.validate()
        if (!valid) return
      } catch (error) {
        return
      }
      if (this.submitting) return
      this.submitting = true
      try {
        await this.$modal.confirm('确定提交表单数据？')
        if (this.form.id) {
          await editDataApi(this.form)
        } else {
          await addDataApi(this.form)
        }
        this.$emit('submit')
        this.$modal.msgSuccess('操作成功')
        this.visible = false
      } catch (e) {
        this.submitting = false
      }
    }
  }
}
</script>
